<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <div @click.self="fn1">
            123
            <p>啦啦啦</p>
            <button @click.once="fn2">点我</button>
            <!-- <input type="text" v-on:keyup.enter="fn3"> -->
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                num: 1,
            },
            methods: {
                fn1() {
                    console.log("父元素事件执行了")
                },
                fn2(e) {
                    console.log("子元素事件执行了")
                },
                fn3() {
                    console.log("键盘按下了！！！")
                }
            }
        })
        // 事件流
        // 是事件的传播机制   分为三个阶段   捕获-目标-冒泡

        // 事件三要素
        // 事件类型
        // 事件源
        // 事件处理函数


        //  1、事件  v-on:事件类型="事件处理",  v-on： 缩写 @
        //  1-1 事件类型
        //  1-1-1 表单   input change  submit
        //  1-1-2 焦点   foucs  blur
        //  1-1-3 鼠标   click dblclick mouseover mouseout 
        //               mouseleave mouseenter mousewheel
        //               mousedown mouseup
        //  1-1-4 键盘   keyup keydown keypress


        // 2-1 事件处理
        // 2-1-1 行内JS处理
        // 2-1-2 使用事件处理函数  （
        // 注意：如果需要使用事件对象，可以在绑定的时候传入$event）


        // 3-1 事件修饰符
        // stop
        // prevent
        // self      只触发本身事件
        // once      只触发一次  


    </script>
</body>

</html>